<template>
  <view class="contact-detail-bg">
    <!-- 信息卡片 -->
    <view class="card">
      <view class="avatar-box">
        <image
          class="avatar"
          @click="perviewImage(detail.avatar)"
          :src="
            detail.avatar ||
            'https://cdn-icons-png.flaticon.com/512/4140/4140048.png'
          "
          mode="aspectFill"
        />
        <view class="camera-icon" @click="addPic">
          <image src="/static/uniapp/camera.png" mode="aspectFit"></image>
        </view>
      </view>
      <view class="avatar-tips">
        <view class="title">Upload Photo</view>
        <view
          >Format should be in .jpeg .png atleast 800x800px and less than
          5MB</view
        >
      </view>
      <!-- 周选择器 - 只在竖屏显示 -->
      <text class="weeklabel">Department</text>
      <view class="week-selector">
        <view class="date-picker" @click="handleSelectList">
          <image
            class="calendar-icon"
            src="/static/uniapp/duration.png"
            mode="aspectFit"
          ></image>
          <text class="selected-date">{{ detail.department ||'Choose department' }}</text>
          <image
            src="/static/uniapp/arrow-down.png"
            mode=""
            style="width: 40rpx; height: 40rpx"
          ></image>
        </view>
      </view>
      <!-- <view class="info-row">
        <text class="label">Department</text>
        <uv-input class="value" border="none" v-model="detail.department" placeholder="Please enter the department" ></uv-input>
      </view> -->
      <view class="info-row">
        <text class="label">First name</text>
        <uv-input class="value" border="none" v-model="detail.first_name" placeholder="Please enter the First name" ></uv-input>
      </view>
      <view class="info-row">
        <text class="label">Last name</text>
        <uv-input class="value" border="none" v-model="detail.last_name" placeholder="Please enter the Last name" ></uv-input>
      </view>
      <view class="info-row">
        <text class="label">Category</text>
        <uv-input class="value" border="none" v-model="detail.company_name" placeholder="Please enter the Category" ></uv-input>
      </view>
      <view class="info-row">
        <text class="label">Title</text>
        <uv-input class="value" border="none" v-model="detail.title" placeholder="Please enter the Title" ></uv-input>
      </view>
      <view class="info-row">
        <text class="label">Email address</text>
        <uv-input class="value" border="none" v-model="detail.email" placeholder="Please enter the Email" ></uv-input>
        <image
          class="icon-btn"
          src="https://img.icons8.com/ios-glyphs/30/00b386/copy.png"
          mode="aspectFit"
          @click="copyEmail"
        />
      </view>
      
      <view class="info-row">
        <text class="label">Phone number</text>
        <uv-input class="value" border="none" v-model="detail.phone" placeholder="Please enter the Phone number" ></uv-input>
        <image
          class="icon-btn"
          src="https://img.icons8.com/ios-glyphs/30/00b386/phone.png"
          mode="aspectFit"
          @click="callPhone"
        />
      </view>
      
      <view class="info-row" v-for="item,index in detail.other_phone" :key="index">
        <text class="label">Other Phone{{ index + 1 }}</text>
        <uv-input class="value" border="none" v-model="detail.other_phone[index]" placeholder="Please enter the Title" ></uv-input>
      </view>

      <view class="info-row" @click="addPhone">
        <uv-icon name="plus-circle-fill" size="20" color="#17A364"></uv-icon>
        <text class="label">Add phone</text>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="bottom-btns">
      <button class="btn save" @tap="hadleDel">Delete</button>
      <button class="btn submit" @tap="onSubmit">Update</button>
    </view>
    <!-- <view class="footBut">
      <button class="cancel-btn" @click="handleDel">
        Delete
      </button>
      <button class="forgot-btn" @click="onSubmit(1)">Update</button>
    </view> -->
    <!-- 公司选择弹窗 -->
    <view
      class="company-selector-popup"
      v-if="showCompanySelector"
      @tap="showCompanySelector = false"
    >
      <view class="company-selector-content" @tap.stop>
        <view class="company-selector-title">
          <text>选择公司</text>
        </view>

        <view class="company-list">
          <view
            class="company-item"
            @tap="selectCompany(item)"
            v-for="item in companyList"
            :key="item.id"
            :class="{ active: companyId === item.id }"
          >
            <view
              class="radio-circle"
              :class="{ 'radio-selected': companyId === item.id }"
            >
            </view>
            <text>{{ item.name }}</text>
          </view>
        </view>

        <view class="close-company-btn" @tap="showCompanySelector = false">
          <text>Close</text>
        </view>
      </view>
    </view>
    <uv-action-sheet
      ref="actionSheet"
      :actions="list"
      :round="25"
      cancelText="Close"
      @select="select"
    >
    </uv-action-sheet>
    <uv-popup ref="showdelat" :zIndex="1001" round="20" :customStyle="{ overflow: 'initial' }">
      <view class="forgot-modal">
        <view class="modal-icon-box" style="background: red">
          <uv-icon class="modal-icon" size="56" color="#fff" name="trash"></uv-icon>
        </view>
        <view class="modal-title">Delete the contact!</view>
        <view class="modal-tip" style="text-align: left;">
          Are you sure you want to delete him/her? Once deleted, it will no longer appear in the list.
        </view>
        <button class="forgot-btn" style="margin-top: 30rpx;" @click="handleDel">Yes, delete him/her</button>
        <button class="cancel-btn" style="margin-top: 15rpx;" @click="$refs.showdelat.close()">No, return to the list</button>
      </view>
    </uv-popup>
  </view>
</template>

<script>
import { getUserInfo1 } from "@/api/login";
import { uploadFile } from "@/api/home";
import { deleteUser, updateUserInfo, getDepartmentList } from "@/api/approval";
export default {
  data() {
    return {
      detail: {
        avatar: "",
        first_name: "",
        last_name: "",
        company_name: "",
        title: "",
        email: "",
        phone: "",
        department: ""
      },
      list: [
        {
          name: "职位一",
        },
        {
          name: "职位二",
        },
      ],
      selectedDate: {
        name: "Choose department",
      },
    };
  },
  onLoad({ id }) {
    if (id) {
      this.id = id;
      this.getData();
    }
    getDepartmentList().then(res => {
      console.log(res, 'getDepartmentList');
      this.list = res
    })
  },
  methods: {
    async getData() {
      let res = await getUserInfo1({ user_id: this.id });
      this.detail = {...res, user_id: this.id};
    },
    addPhone() {
      this.detail.other_phone.push('')
    },
    goBack() {
      uni.navigateBack();
    },
    handleSelectList() {
      this.$refs.actionSheet.open();
    },
    select(e) {
      console.log("选择", e);
      this.detail.department = e.name;
      this.detail.department_id = e.id;
      this.selectedDate = e;
    },
    close() {
      console.log("关闭");
      this.$refs.actionSheet.close();
    },
    copyEmail() {
      uni.setClipboardData({
        data: "1311669602@qq.com",
        success: () => {
          uni.showToast({ title: "已复制邮箱", icon: "success" });
        },
      });
    },
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: "19993445375",
      });
    },
    addPic: async function () {
      console.log('addPic', this.detail);
      let that = this;
      uni.chooseImage({
        count: 9, // 最多可以选择的图片张数，默认9
        sizeType: ["compressed"], // original 原图，compressed 压缩图，默认二者都有
        sourceType: ["album", "camera"], // album 从相册选图，camera 使用相机，默认二者都有
        success: async function (res) {
          console.log(res);
          let uploadIFileRes = await uploadFile(res.tempFiles[0].path);
          console.log(uploadIFileRes);
          that.detail.avatar = uploadIFileRes.full_path;
        },
      });
    },
    handleDel(){
      deleteUser(this.detail.id).then(res => {
        uni.$uv.toast('Delete successfully')
        this.goBack();
      })
    },
    async onSubmit() {
      await updateUserInfo(this.detail)
      uni.$uv.toast('Updat successfully')
      this.getData();
    },
    hadleDel() {
			this.$refs.showdelat.open('bottom');
		},
    perviewImage(img) {
      uni.previewImage({
        urls: [img], // 图片地址数组
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contact-detail-bg {
  min-height: 100vh;
  background: #f7f9fb;
  padding: 15px 16px 150rpx 16px;
}
.nav-bar {
  display: flex;
  align-items: center;
  height: 56px;
  background: #fff;
  padding: 0 0 0 16px;
  .back-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e9f9f3;
    margin-right: 10px;
    .back-icon {
      width: 22px;
      height: 22px;
    }
  }
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #222;
    margin-right: 36px;
  }
}
.card {
  background: #fff;
  border-radius: 20px;
  padding: 20px 0 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .avatar-box {
    width: 110px;
    height: 110px;
    border-radius: 20px;
    background: #e9eefd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24rpx;
    position: relative;
    .avatar {
      width: 90px;
      height: 90px;
      border-radius: 16px;
      background: #fff;
    }

    .camera-icon {
      position: absolute;
      right: -10rpx;
      bottom: -10rpx;
      width: 60rpx;
      height: 60rpx;
      background-color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }

    .camera-icon image {
      width: 36rpx;
      height: 36rpx;
    }
  }
  .avatar-tips {
    width: 368rpx;
    font-weight: 400;
    font-size: 10px;
    color: #667085;
    line-height: 13px;
    text-align: center;
    .title {
      font-weight: 500;
      font-size: 24rpx;
      color: #475467;
      margin-bottom: 8rpx;
    }
  }
  .info-row {
    width: 90%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f2f5;
    padding: 18px 0 8px 0;
    position: relative;
    .label {
      color: #7a8fa6;
      font-size: 15px;
      width: 120px;
      flex-shrink: 0;
    }
    .value {
      color: #222;
      font-size: 15px;
      flex: 1;
      margin-left: 10px;
    }
    .icon-btn {
      width: 22px;
      height: 22px;
      margin-left: 8px;
    }
  }
  .info-row:last-child {
    border-bottom: none;
  }
}

/* 公司选择弹窗样式 */
.company-selector-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* 改为底部对齐 */
}

.company-selector-content {
  width: 100%;
  /* 宽度占满 */
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  /* 只保留顶部圆角 */
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
  /* 添加向上滑动动画 */
}

.company-selector-title {
  font-size: 38rpx;
  color: #333;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40rpx;
}

.company-list {
  margin-bottom: 40rpx;
}

.company-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.radio-circle {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #e5e7eb;
  margin-right: 20rpx;
  background-color: #f9f9f9;
}

.radio-selected {
  border: 8rpx solid #17a364;
  background-color: #fff;
}

.company-item text {
  font-size: 34rpx;
  color: #333;
}

.close-company-btn {
  margin-top: 20rpx;
  height: 90rpx;
  border-radius: 100rpx;
  border: 1px solid #17a364;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close-company-btn text {
  color: #17a364;
  font-size: 34rpx;
}

/* 横屏模式下的滚动条样式 */
.landscape-scroll {
  scroll-behavior: smooth;
  /* 使滚动更平滑 */
}
.weeklabel {
  color: #7a8fa6;
  font-size: 15px;
  width: calc(100% - 60rpx);
  text-align: left;
  margin-top: 30rpx;
  flex-shrink: 0;
}
/* 周选择器样式 */
.week-selector {
  width: calc(100% - 120rpx);
  margin: 10rpx 30rpx 30rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  padding: 30rpx;
  border: 1px solid #eee;
}

.week-label {
  font-weight: 400;
  font-size: 12px;
  color: #475467;
  line-height: 15px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-right: 30rpx;
  font-weight: 400;
  display: flex;
  align-items: center;
  height: 50rpx;
  padding-right: 20rpx;
  margin-right: 20rpx;
  border-right: 1px solid #d0d5dd;
}

.line {
  font-size: 62rpx;
  color: #d0d5dd;
  font-weight: 300;
  line-height: 1;
  margin-left: 10rpx;
  display: inline-flex;
  align-items: center;
  transform: translateY(-4rpx);
}

.date-picker {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calendar-icon {
  width: 38rpx;
  height: 38rpx;
  margin-right: 16rpx;
  color: #0e623d;
}

.selected-date {
  color: #333;
  flex: 1;
  font-weight: 400;
  font-size: 26rpx;
  color: #1d232e;
  line-height: 19px;
  text-align: left;
}
.footBut {
  display: flex;
  justify-content: space-around;
}
</style>